/*conmon*/
*{margin: 0}
/*::-webkit-scrollbar{width:0}*/
html,body{height: 100%}
.clear:after{display: block;content: '';clear: both}
.fl{float: left}
.fr{float: right}
a{text-decoration: none}
li{list-style: none}
input{outline: none}
.fixed{opacity:0.8;color: #f3d7c8
}
.fixed .nav-menu a{color: #f3d7c8
}

/*layout*/
nav{position: fixed;height: 50px;display: none;color: #ecffde;opacity: 0.8;
    background: linear-gradient(to right, #010a0d,#073644, #0f4454,#085062,#083745,#010a0c); transition: opacity 0.7s}
.nav-menu{line-height: 50px}
.nav-menu>li{display: inline-block;float: left;width: 25%;text-align: center;cursor: pointer}
.nav-menu>li>a{font-size: 18px;font-weight: 200;color: #ecffde;text-decoration: none}
.nav-menu>li:hover{background-color: #078085;transition: all 0.5s}
.nav-menu>li:hover a{color: #fffefa  }
#bg-xs{background: linear-gradient(to right, #010a0d,#073644, #0f4454,#085062,#083745,#010a0c);opacity: 0.8;}
#bg-xs li:hover{background-color:#078085 }
#bg-xs a{font-size: 18px;font-weight: 200;color: #ffffff;text-decoration: none}

/*main*/
/*.main{height: 100%;}
.main-pages{height: 400%}*/
.page1{background: url("../images/page1-bg2.jpg");
    background-size: cover; filter:  hue-rotate(30deg); }
.active-box{width: 160px;height: 160px;margin-left: auto;
    margin-right: auto;background-color: #00b3ee;border-radius: 50%;transition: all 0.8s;
animation: mylight 4s ease-out infinite;background: url("../images/active2.jpg");background-size: cover}
@keyframes mylight {
    0%{box-shadow: 0 0 66px #e1fcff
    }
    25%{box-shadow: 0 0 12px #e1fcff}
    50%{box-shadow: 0 0 66px #e1fcff}
    75%{box-shadow: 0 0 12px #e1fcff}
    100%{box-shadow: 0 0 66px #e1fcff}
}
.active-box:hover{width: 320px;border-radius: 10px }
.about-me{height: 100px;margin-top: 260px;width: 260px;margin-left: auto;
    margin-right: auto;text-align: center;padding-top: 20px;font-size: 24px;
    color: #2e190d;font-weight: 600;font-family: 微软雅黑}


/*page2*/
.box{width: 160%;height:100%;position: relative;cursor: pointer;padding: 0}
.box>li{display: block;float: left;width: 12.5%;height: 100%;position: relative;
    background-repeat: no-repeat;background-position: center;filter: opacity(90%)}
.buttons{width: 120px;height: 120px;position: absolute;padding-right: 34px;
    padding-top: 60px;right: 0;top: 0;z-index: 9}
.lf{width: 22px;height: 22px;border: 3px solid black;border-radius: 50%;float: right;margin-right: 14px}
.rg{width: 22px;height: 22px;border: 3px solid black;border-radius: 50%;float: right}
.bk{background-color: black}
.box-tip{transform: rotate(270deg);position: absolute;left: -40px;bottom: 80px;
    background-color: #000000;width: 180px;height: 55px;
    text-align: center;opacity: 0.9}
.box-tip h1{font-size: 28px;font-weight: bolder;color: #ffffff;line-height: 25px}
.detaile{position: absolute;bottom: -300px;left: 20px;width: 43%;height: 180px;background-color: #b8b8ef;
    opacity: 0.6;padding-left: 40px;min-width: 300px;}
.detaile h1{font-size: 32px;font-family: Arial;font-weight: 500;color: #ffffff;
    opacity: 0;position: absolute;top: 36px;left: 30px}
.detaile span{display: block;position: absolute;bottom: 40px;right: 10px;color: #ffffff;opacity: 0
;font-weight: 800;width:180px;height: 40px;}
.detaile span>strong{font-size: 18px;float: right;line-height: 20px}
.detaile span>i{float: right}
.detaile span:hover{color: #ff3030
}
.detaile p{opacity: 0;color: #ffffff;position: absolute;bottom: 40px;line-height: 10px;left: 30px;
    font-family: Arial;font-size: 16px;z-index: 5;text-align: center}
.bbb{bottom: -300px}






/*skill*/
.detaile>div{position: absolute;left: 30px;height: 30px;width: 0;background-color: #0f4454;bottom: 40px;}







/*page4*/
.p4-address{text-align: center;color: #d6ffff}
.p4-address>span{font-size: 36px}
.p4-address>p{font-size: 24px;font-weight: 400}
.p4-email{text-align: center;color: #d6ffff}
.p4-email>span{font-size: 36px}
.p4-email>p{font-size: 24px;font-weight: 400}
.p4-phone{text-align: center;color: #d6ffff}
.p4-phone>span{font-size: 36px}
.p4-phone>p{font-size: 24px;font-weight: 400}

.mes{
    width: 80%;
    margin: 20px auto;
    height: 100%;
}
.mes p input{
    display: block;
    width: 48%;
    height: 35px;
    border: 1px dashed #959595;
    outline: none;
    text-indent: 10px;
    font-family: Regular, 微软雅黑;
    font-size: 16px;
    color: #d6ffff;
    background-color: #094e5f;
    opacity: 0.8;
}
.mes p input:nth-child(1){
    float: left;
}
.mes p input:nth-child(2){
    float: right;
}

.mes textarea{
    resize: none;
    width: 100%;
    height: 50%;
    line-height: 50px;
    margin-top: 10px;
    box-sizing: border-box;
    border: 1px dashed #959595;
    outline: none;
    text-indent: 10px;
    font-family: 'Microsoft YaHei', '微软雅黑', 'Microsoft JhengHei', '华文黑体', STHeiti, sans-serif;
    font-size: 16px;
    color: #d6ffff;
    background-color: #094e5f;
    opacity: 0.8;
}
.mes button{
    display: block;
    width: 150px;
    height: 35px;
    margin: 20px auto;
    border: 1px solid #ffffff;
    color: #d6ffff;
    font-size: 18px;
    background-color: #094e5f;
    opacity: 0.8;
}

@media screen and (min-width: 765px){
    .mes textarea{
        height: 150px;
    }
}